<template>
  <div class="listItem">
    <el-row v-for="(item, index) in itemData" :key="index">
      <el-col :span="24" v-if="!(item.personality && !item.cont)">
        <p class="item_tit" :class="{ is_big: activeName === '1' }">{{ item.titName }}</p>
        <p
          class="item_conts"
          :class="{ is_big: activeName === '1' }"
          v-html="removeHtmlStyle(item.cont || '未填写')"></p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    itemData: {
      type: Array,
    },
    activeName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
  components: {},
}
</script>

<style lang="scss" scoped>
.listItem {
  word-break: break-all;
  .item_tit {
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    padding: 10px 0 10px 0;
    letter-spacing: 1px;
  }
  .item_conts {
    color: #666666;
    font-size: 14px;
    background-color: #e9eff48f;
    padding: 10px;
    line-height: 24px;
  }
  .is_big {
    font-size: 16px;
  }
}
</style>
